import styles from './voicePeakAlign.module.scss';
import { useEffect, useState } from 'react';
import MlsAudio from '@/components/common/mlsAudio';
import { Image, Button } from '@arco-design/web-react';
import { ICON_PATHS } from '@/assets/images/constants';
import { downloadAudio } from '@/utils/common';

const TYPE_LIST = [
  {
    label: '同期声制作-波峰对齐音频',
    key: 'mic1',
    child: [],
  },
  {
    label: '人声分离',
    key: 'mic2',
    child: [],
  },
];
export default function VoicePeakAlign({alignPeakList}) {
  const [typeList, setTypeList] = useState(TYPE_LIST);

  useEffect(() => {
    const wholeAudioList = alignPeakList.map(item => {
      return {
        url: item.wholeAudioUrl || '',
        micType: item.micType || '',
      };
    });
    const separateAudioList = alignPeakList.map(item => {
      return {
        url: item.separateAudioUrl || '',
        micType: item.micType || '',
      };
    });

    // 使用映射表简化逻辑
    const keyToChildMap = {
      mic1: wholeAudioList,
      mic2: separateAudioList,
    };

    // 使用函数式更新，确保状态不可变性
    setTypeList(prevTypeList =>
      prevTypeList.map(item => ({
        ...item,
        child: keyToChildMap[item.key] || item.child, // 保持默认值
      }))
    );
  }, [alignPeakList]);

  return (
    <div className={styles.voicePeakAlign}>
      {typeList.map(item => (
        <div className={styles.listBox} key={item.key}>
          <div className={styles.voicePeakAlignPageTitle}>
            <span>{item.label}</span>
          </div>
          <div className={styles.voiceContentList}>
            {(item.child || []).map((item, index) => (
              <div className={styles.audioItem} key={index}>
                <div className={styles.audioItemTitle}>
                  <Image
                    width={24}
                    height={24}
                    src={ICON_PATHS.MIC_ICON}
                    draggable={false}
                    preview={false}
                  />
                  <div className={styles.audioDeviceType}>{item.micType}</div>
                </div>
                <div className={styles.audioContent}>
                  <MlsAudio
                    src={item.url}
                    title={'示例音频'}
                    showTitle={false}
                    progressHeight={20}
                    showVolumeControl={false}
                    showELseControl={false}
                    progressBgColor="rgba(255, 255, 255, 0.2)"
                  />
                </div>
                <div className={styles.otherActions}>
                  <Button
                    type="primary"
                    className={styles.downLoadButton}
                    onClick={() => downloadAudio(item.url)}>
                    <Image
                      className={styles.downloadIcon}
                      src={ICON_PATHS.DOWNLOAD_ICON}
                      alt="下载"
                      draggable={false}
                      preview={false}
                    />
                    下载
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}
